$margin: 0.5rem;
$soliddisable: #E6E8EA;
$types: (
    primary,
    secondary,
    tertiary,
    warning,
    danger
);

$sizes: (
    small,
    medium,
    large
);

$borderStyles: (
    solid,
    dashed,
    dotted,
);

.button {

    @each $item in $borderStyles {
        &[data-border="#{$item}"] {
            border-style: #{$item};
        }
    }

    @each $item in $sizes {

        &[data-size="#{$item}"] {
            font-size: var(--myTheme-font-size-#{$item});

            @if $item ==small {
                font-size: 0.8rem;
                min-height: 1.5rem;
                height: 1.5rem;
                padding: 0 0.5rem;
            }

            @else if $item ==medium {
                font-size: 1rem;
                min-height: 2rem;
                height: 2rem;

                padding: 0.25rem 0.75rem;
            }

            @else if $item ==large {
                font-size: 1.2rem;
                min-height: 3rem;
                height: 3rem;
                padding: 0.75rem 1rem;
            }

        }
    }

    @each $item in $types {
        &[data-type="#{$item}light"] {
            color: var(--myTheme-color-#{$item});
            background-color: var(--myTheme-color-lightbase);
        }

        &[data-type="#{$item}light"]:hover {
            background-color: var(--myTheme-color-lightbase-light);
        }

        &[data-type="#{$item}solid"] {
            color: var(--myTheme-color-white);
            background-color: var(--myTheme-color-#{$item});
        }

        &[data-type="#{$item}solid"]:hover {
            background-color: var(--myTheme-color-#{$item}-light);
        }

        &[data-type="#{$item}borderless"] {
            color: var(--myTheme-color-#{$item});
        }

        &[data-type="#{$item}borderless"]:hover {
            background-color: var(--myTheme-color-lightbase);
        }

        &[data-type="#{$item}outline"] {
            color: var(--myTheme-color-#{$item});
            border-width: 1px;
            border-color: var(--myTheme-color-#{$item});
        }

        &[data-type="#{$item}outline"]:hover {
            background-color: var(--myTheme-color-lightbase);
        }
    }
}

.block {
    display: block;
    width: calc(100% - $margin*2);
}

.haspicButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.button:disabled {
    @each $item in $types {
        &[data-type="#{$item}light"] {
            color: var(--myTheme-color-disabled);
            background-color: var(--myTheme-color-lightbase);
        }

        &[data-type="#{$item}light"]:hover {
            color: var(--myTheme-color-disabled);
            background-color: var(--myTheme-color-lightbase);
        }

        &[data-type="#{$item}solid"] {
            color: var(--myTheme-color-disabled);
            background-color: $soliddisable;
        }

        &[data-type="#{$item}solid"]:hover {
            background-color: $soliddisable;
        }

        &[data-type="#{$item}borderless"] {
            color: var(--myTheme-color-disabled);
        }

        &[data-type="#{$item}borderless"]:hover {
            background-color: #ffffff00;
        }

        &[data-type="#{$item}outline"] {
            color: var(--myTheme-color-disabled);
            border: 1px solid var(--myTheme-color-disabled)
        }

        &[data-type="#{$item}outline"]:hover {
            background-color: #ffffff00;
        }
    }


    cursor: not-allowed
}